@charset "UTF-8";
/*
* v0.1.0 初步完善
*/

/*初始化*/
*{padding:0;margin:0; font-family: "Microsoft Yahei","宋体","Tahoma",Arial;}
body{background:#aaa;}

.wrap{width:95%; margin:0 auto;}
.clear{clear:both;width:100%;height:10px;}
.filepath{padding:5px; margin-bottom:5px; font-size: 12px;color:#ccc; border-bottom:1px dashed #eee;}
.alert{margin:10px auto;width:400px;color:red;}

.header,.main,footer{width:100%;}
.header{box-shadow: 0 2px 3px rgba(0,0,0,0.15),inset 0 -1px 0 0 #fcfcfc; margin-bottom:5px; 
	position: fixed;top: 0;left: 0;z-index: 5;}
.header h1{margin:0 10px;}
.main{margin-top:35px;}
.footer{background:#000;padding:25px 20px;color:#fff;}
.footer a{color:#fff;}

/*顶部导航*/
.nav{background:#fafafa; overflow:hidden;}
.nav a{float:left;}
.nav a:hover{background:#0096ff;color:#fff;}
.nav .topmenu{color:#333; padding:5px;border-right:1px solid #eee; text-decoration: none; border-bottom: 2px solid #fafafa;}
.nav .current{/*background:#0096ff;color:#fff;*/background:#ddd; border-bottom: 2px solid #0096ff;}


/*left*/
.main .left{
	background-color: #f3f3f3;
	border: 1px solid #D9D9D9;
	
	width:200px;
	padding:5px;
	float:left;
	clear:right;
	border-radius: 10px;
}


.main .right{
	border:1px solid #eee;
	padding:10px;margin:5px;

	margin-left: 220px;/*==等于左边栏宽度==*/
	
	min-height: 200px;
	height: auto !important;
	height: 200px;
	
	background-color: #fff;
    border-radius: 20px;
}



/*materialize design*/
.main .left,
.main .right {
    /*
	position: relative;
    margin: .5rem 0 1rem 0;
	*/
    transition: box-shadow 0.35s;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
.main .left:hover,
.main .right:hover{
	transition:box-shadow .25s;
	box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.19)
}



/*间距*/
.space20{width:100%; height:20px;}
.space40{width:100%; height:40px;}
.space60{width:100%; height:60px;}


#leftpanel h5 {
    height: 35px;
    line-height: 35px;
    margin: -1px 1px 0;
    border: 1px solid #D9D9D9;
    border-width: 1px 0;
    font-size: 14px;
    text-indent: 0px;
    color: #333;
    cursor: pointer;
}

#leftpanel .submenu{
	color:red;
	margin-left: 0px;
	list-style:none;
	cursor: pointer;
	display:block;
}
#leftpanel .submenu li{
	padding-left: 15px;
}

#leftpanel .submenu li.cur{
	background-color:#eee;
}
#leftpanel .submenu li.cur a{
	border-right: 5px solid #563d7c;
    font-weight: bold; 
    color: #563d7c; 
}
#leftpanel .submenu li:hover{
	background-color:#ddd;
}
#leftpanel .submenu a{
	display: block;
	text-decoration: none;
	color: #333;
	
	height: 30px;
    line-height: 30px;
    font-size: 12px;
    border-radius: 3px;
}

/*返回顶部*/
.foot_top{ padding:5px; font:14px/20px arial; text-align:center; 
	color:#fff;
    position: fixed;
    bottom:0px;
    right:0px;
	text-decoration: none;
	z-index: 5;
	border-radius:10px;
}
.foot_top a{color:#fff; margin:1px;display:block;      background: #0096FF; 
    padding: 5px; text-decoration: none; border-radius: 5px; opacity:0.2;}
.foot_top a:hover{text-decoration:underline;opacity:0.9;}

.footer a{margin:10px 2px; display: inline-block;} 


/*一些通用的颜色和样式*/
.small {font-size: 11px;}
.fade {color: #888;}
.fade a{color: #888;}

.light {color: #ccc;}
.gray {    color: #999;}

.red{color:red;}
.red a, a.red{color:red;}

.green{color:green;}
.green a, a.green{color:green;}

a.redBg{ background:#fafafa;color:#0096ff;  padding: 5px; text-decoration:none; border-bottom: 2px solid #0096ff;}
a.redBg:hover{background:#fafafa; color:#0096ff;}


code{font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 12px;}
p>code {
    font-family: monospace;
    background-color: #eaeaea;
	font-size: 85%;
	
	color: #d63200;
    background-color: rgba(0,0,0,0.04);

    border-radius: 3px;
	padding: 5px; margin: 5px;
}


.tips{
	font:15px/1.5 Courier;
	color: #787d82;background: #edf1f2;
	padding:5px;
}

/*引用实例*/
blockquote{
    background: url(../images/quotes.gif) no-repeat top left;
    background-position: 12px 12px;
    margin: 5px 0;
    padding: 8px 1em 8px 4em;
	border-left: 10px #eee solid;
	
	font-family: 'PT Serif', Georgia, Times, 'Times New Roman', 'Heiti SC', 'Microsoft Yahei', 微软雅黑, 宋体, serif;
	font-size: larger;
	font-style: normal;
}

blockquote.small{
    margin-bottom: 0;
    font-weight: 300;
    line-height: 1.25;
    font-size: 12px;
    color: #999999;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    padding: 0 0 0 15px;
    margin: 0 20px 20px;
    border-left: 5px solid #eee;
    background: none;
}


/* 段落前空几格 */
.indent_1{text-indent: 0em;}
.indent_2{text-indent: 2em;}
.indent_3{text-indent: 4em;}
.indent_4{text-indent: 6em;}
.indent_5{text-indent: 8em;}
.indent_6{text-indent: 10em;}



/*按钮样式，必须包括在.btn中的a才能设置按钮*/
.btn {
    font-size: 15pt;
    margin-bottom: 0;
    margin-top: 10px;
	border: 1px dashed #797979;
	
    padding: 10px 5px;
    	
	line-height:20px;
	/*
	
	
	background:#DCDCBC;
	*/
	
	border-radius:10px;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 10px;
}

.btn a {
    background: url("%3D%3D") repeat-x scroll 0 0 transparent;
    color: #FFFFFF;
    cursor: pointer;

    font-size: 15pt;
    font-weight: bold;
    margin-right: 10px; margin-bottom: 10px;
    padding: 5px 12px;
    text-decoration: none;

		
	border-radius:10px;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 10px;

	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}

.btn a:hover {
    background-image: url("");
}
.btn .blue {    background-color: #2DAEBF;}
.btn .red {    background-color: #E33100;}
.btn .orange {    background-color: #FFB515;}
.btn .pink {    background-color: #FF0097;}
.btn .green {    background-color: #6ABF4D;}

.btn .white {    background-color: #EEEEEE;    color: #555555;}

.btn .btn_weibo {
    background: none repeat scroll 0 0 transparent;
    padding: 3px 2px;
    text-shadow: none;
}

.btn .btn_weibo img {
    border: medium none;
    margin-left: 5px;
    vertical-align: middle;
}




/*buttons*/

/*main style of button*/
.button, .button:visited {
	background: #222;
	display: inline-block;
	padding: 5px 10px 6px;
	color: #fff;
	text-decoration: none;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer
}


/*sizes of button*/
.small.button, .small.button:visited 			       { font-size: 11px}
.button, .button:visited,
.medium.button, .medium.button:visited { font-size: 13px;
	font-weight: bold;
	line-height: 1;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}

.large.button, .large.button:visited { font-size: 14px;
		padding: 8px 14px 9px; }

.super.button, .super.button:visited { font-size: 34px;
			padding: 8px 14px 9px; }

							  
/*colors of button*/
.pink.button, .magenta.button:visited	{ background-color: #e22092; }
.pink.button:hover					{ background-color: #c81e82; }

.green.button, .green.button:visited{ background-color: #91bd09; }
.green.button:hover        { background-color: #749a02; }

.red.button, .red.button:visited{ background-color: #e62727; }
.red.button:hover{ background-color: #cf2525; }

.orange.button, .orange.button:visited{ background-color: #ff5c00; }
.orange.button:hover{ background-color: #d45500; }

.blue.button, .blue.button:visited           { background-color: #2981e4; }
.blue.button:hover{ background-color: #2575cf; }

.yellow.button, .yellow.button:visited{ background-color: #ffb515; }
.yellow.button:hover{ background-color: #fc9200; }

.white.button, .white.button:visited{ background-color: #ccc; }
.white.button:hover{ background-color: #888; }
/*
usage:
	<li> <a class="large button blue">Blue Button</a>
		<a class="large button red">Red Button</a></li>
	<li><a class="large button orange">Orange Button</a>
		<a class="large button yellow">Yellow Button</a></li>
*/







/*left corner bottom contents*/
#common_box{
	width:400px;
	height:30px;

	position:fixed;
	bottom:0;
	left:-200px;

	overflow:hidden;
	/*
	border:1px solid #eee;
	box-shadow: 0px -1px 2px 0px #000000;
	*/
	opacity:0.8;
	box-shadow: 0px -1px 2px 0px #000000, 
		0px 1px 3px 0px #FFFFFF;
	background:#fff;
	border-radius:5px;
	
	z-index:88;
}
#common_box .title{
	opacity:0.9;
	width:100%;
	height:30px;
	line-height:30px;
	float:right;
	background:#E3E3E3; /*ac8932*/
	text-align:right;
	color:#6a737d;
	background-image: linear-gradient(to bottom,#f3f3f3 0,#e3e3e3 100%);
}
#common_box .title b{padding: 8px 10px; 
	cursor:pointer;
}
#common_box .container{
	/*overflow: scroll;/*当内部元素超出外部元素的高度并且外部overflow: scroll的时候 外部会scroll   https://www.cnblogs.com/wenruo/p/9754576.html*/
    width:inherit;
    margin-top: 30px;
    overflow-y: scroll;
}
#common_box .content{margin: 0;}
#common_box .content ol{padding-right:0; padding-left:30px; border-width:0px;}

pre{tab-size:4;}





/*======================媒体查询，添加随着窗口大小而显示或隐藏的内容=========================*/
@media screen and (max-width: 1280px) { /*小屏幕：宽度小于1280px时，不显示时间*/
  div#topTime{
    display: none;
  }
}

@media screen and (min-width: 1280px) { /*大屏幕：宽度大于1280px时，显示时间*/
  div#topTime{
    display:block;
  }
}

@media screen and (max-width: 900px) { /*缩小屏幕到900px时*/
	.main .right{
	  margin-top:60px;
	}
}

@media screen and (max-width: 600px) { /*缩小屏幕到600px时*/
  .main .left {
	  width:100px; overflow:hidden;
  }
  .main .right{
	  margin-top:60px;
	  margin-left: 120px;
  }
  #leftpanel .submenu li {
    padding-left: 0;
  }
  #leftpanel h5 , #leftpanel .submenu a {font-size: 5px;overflow: hidden;}
  .footer{overflow: auto;padding:0;}
}

@media screen and (max-width: 500px) { /*手机屏幕420px*/
  .main .left {
    width:100%;
	margin:35px 0px 0px 0px;
	padding:0;
  }
  .main .right{
	  margin-top:10px;
	  margin-left: 0px;
	  float:left;
	  width:95%;
  }
  #leftpanel .submenu li {
    padding-left: 0;
  }
  #leftpanel h5 , #leftpanel .submenu a {font-size: 5px;overflow: hidden;}
  .footer{overflow: auto;padding:0;}
}
